function loadEcharts(todayDetailList) {
  // ---------------------------------------------------------
  // 可视化编程  echarts canvas three.js webgl
  // 准备好  x轴和y轴的数据
  var xCity = [] //省份的数据
  var yconfirmedNum = [] //累计确诊数据
  // 排序
  function compare(name) {
    return function(a, b) {
      var value1 = a[name]
      var value2 = b[name]
      return value2 - value1
    }
  }
  todayDetailList.sort(compare('confirmedNum'))
  console.log(todayDetailList)
  todayDetailList.forEach(element => {
    xCity.push(element.provinceName)
    yconfirmedNum.push(element.confirmedNum)
  })
  xCity.length = 30
  yconfirmedNum.length = 30
  // echarts使用
  // 1)引入 echart.js
  // 2) 准备dom容器

  // 3)基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'))

  // 4)准备图表配置项
  // 指定图表的配置项和数据
  option = {
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: xCity, //x轴数据
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          interval: 0,
          formatter: function(value) {
            //x轴的文字改为竖版显示
            var str = value.split('')
            return str.join('\n')
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '累计确诊',
        type: 'bar',
        barWidth: '20%',
        data: yconfirmedNum //y轴数据,
      }
    ]
  }
  //5 // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}
